import React, { useEffect, useState } from 'react';
import { Card, Table, Button, Tabs, Row, Col, Checkbox, message } from 'antd';
import axios from 'axios';
import type { TableProps } from 'antd';

axios.defaults.baseURL = 'http://127.0.0.1:3000/zlq';

export default function Diagnostic() {
    interface DataType {
        key: string;
        name: string;
        entry: number;
        address: string;
        tags: string[];
        state: boolean; // 假设有一个state字段
    }

    const [selectedCategory, setSelectedCategory] = useState('category1');
    const [dataFalse, setData] = useState<DataType[]>([]); // 存储state为false的数据
    const [selectedRowKeysFalse, setSelectedRowKeysFalse] = useState<React.Key[]>([]); // 记录选中的左侧表格项
    const [selectedRowKeysTrue, setSelectedRowKeysTrue] = useState<React.Key[]>([]); // 记录选中的右侧表格项
    const [diagnostic_cate, setDiagnostic_cate] = useState([]);
    const [currentPageFalse, setCurrentPageFalse] = useState(1); // 当前页（左侧表格）
    const [pageSizeFalse, setPageSizeFalse] = useState(10); // 每页条数（左侧表格）

    const { TabPane } = Tabs;

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '编号',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
            render: (state: boolean) => (state ? 'Active' : 'Inactive'),
        },
    ];


    // 获取诊断列表
    const getDiagnosticList = async () => {
        let { data: { code, diagnosticList } } = await axios.get('/diagnosticList');
        if (code === 200) {
            setData(diagnosticList); // 更新state为false的数据
        }
    };

    // 获取分类列表
    const getDiagnostic_cate = async () => {
        let { data: { code, diagnostic_cateList } } = await axios.get('/diagnostic_cateList');
        if (code === 200) {
            setDiagnostic_cate(diagnostic_cateList);
        }
    };

    useEffect(() => {
        getDiagnosticList();
        getDiagnostic_cate();
    }, []);

    const handleCategoryChange = (key: string) => {
        setSelectedCategory(key);
    };


    // 分页变化时触发的函数
    const handlePageChange = (page: number, pageSize: number) => {
        setCurrentPageFalse(page);
        setPageSizeFalse(pageSize);
    };

    return (
        <div style={{}}>
            <Card bordered style={{ width: '1000px', height: "1000px" }}>
                <div style={{ padding: '20px' }}>
                    <Tabs defaultActiveKey="category1" activeKey={selectedCategory} onChange={handleCategoryChange}>
                        {diagnostic_cate.map((category, index) => (
                            <TabPane tab={category.name} key={category._id} style={{ width: "1000px" }}>
                                <Row gutter={24}>
                                    <Col span={12}>
                                        <Table<DataType>
                                            style={{width:"1000px",height:"1000px"}}
                                            pagination={{
                                                current: currentPageFalse,  // 当前页
                                                pageSize: pageSizeFalse,     // 每页条数
                                                onChange: handlePageChange,  // 分页改变时的回调
                                                total: dataFalse.length,    // 总数据量
                                            }}
                                            columns={columns}
                                            dataSource={dataFalse}
                                            rowKey="key"
                                            rowSelection={{
                                                selectedRowKeys: selectedRowKeysFalse,  // 左侧表格选中项
                                                onChange: (newSelectedRowKeys) => {
                                                    setSelectedRowKeysFalse(newSelectedRowKeys);
                                                },
                                            }}
                                        />
                                    </Col>
                                </Row>
                            </TabPane>
                        ))}
                    </Tabs>
                </div>
            </Card>
        </div>
    );
}
